<template>
  <div id="app">
      <div class="header"> 
        <div class="header-left">
            <div class="iconfont bcak-icon">&#xe897;</div>
        </div>
        <div class="header-title">
          职工在线订餐
          </div>
    </div>
    <router-view/>
    <nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar">
				<span class="mui-icon icon-swticondingcan"></span>
				<span class="mui-tab-label">订餐</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon icon-liushuizhangdan-xiugai"></span>
				<span class="mui-tab-label">订单</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon icon-dingdandaifukuan"></span>
				<span class="mui-tab-label">帐单</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon icon-wo"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style lang='stylus' scoped>
.header
   display: flex
   position relative
   line-height: .86rem
   background #333333e6
   color:#fff
.header-left
  width: 1rem
  float: left
  line-height .89rem
.bcak-icon
  text-align: center
  font-size: .4rem
.header .header-title
  right 40px;
  left 40px;
  width auto
  margin 0
.header-title
  position absolute
  text-align center
</style>
